<template>
  <div class="insert-link-wrapper">
    <h2>输入链接</h2>
    <base-input class="href-input" placeholder="链接" v-model:value="href"></base-input>
    <base-input class="cover-input" placeholder="字段" v-model:value="cover"></base-input>

    <button class="submit" @click="submit">确认</button>

    <i class="iconfont icon-cancel" @click="this.$emit('exit')"></i>
  </div>
</template>

<script>
import BaseInput from '@/components/utils/Input/BaseInput.vue';

  export default {
    components: {
      BaseInput,
    },
    data() {
      return {
        cover: '',
        href: ''
      }
    },
    methods: {
      submit() {
        this.$emit('submit', {
          cover: this.cover,
          href: this.href
        })
      }
    },
  }
</script>

<style lang="less" scoped>
@w: var(--insertLinkWidth);
@h: calc(var(--insertLinkWidth) * 0.9);

.insert-link-wrapper {
  box-sizing: border-box;
  width: @w;
  height: @h;
  border-radius: calc(@w * 0.05);

  padding: calc(@h * 0.1) 0;

  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;

  background-color: white;

  .href-input,
  .cover-input {
    --baseInputWidth: calc(@w * 0.7);
    --baseInputHeight: calc(@h * 0.15);
    --baseInputFontsize: calc(@h * 0.06);
  }

  .submit {
    width: calc(@w * 0.7);
    height: calc(@h * 0.15);
    border-radius: calc(@w * 0.02);

		background-image: linear-gradient(to right, #83a4d4 0%, #b6fbff  51%, #83a4d4  100%);
    background-size: 200% auto;
    background-position: left center;

    color: white;
    font-weight: bold;
    font-size: calc(@h * 0.07);

    transition: .5s;

    &:hover {
      background-position: right center;
    }
  }

  .icon-cancel {
    position: absolute;
    top: 5%;
    right: 5%;
    transition: .2s;
    transform: rotate(0);

    &:hover {
      transform: rotate(180deg);
      cursor: pointer;
    }
  }
}
</style>